<template>
  <div class="kruup-loding">
    <svg
      :width="width"
      :height="height"
      viewBox="0 0 50 50"
      preserveAspectRatio="xMidYMid meet"
    >
      <!--
       stroke-dasharry=2pir/4=2*3.1415926*22/4  = 4  
       stroke-linecap  截断处圆角
     -->
      <circle
        cx="25"
        cy="25"
        r="22"
        fill="none"
        stroke-width="3"
        :stroke="outsideColor"
        stroke-dasharray="34"
        stroke-linecap="round"
      >
        <!-- <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 25 25"
          to="360 25 25"
          dur="2s"
          repeatCount="indefinite"
        /> -->
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 25 25;360 25 25"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          :dur="`${+dur*2}s`"
          :values="outsideColorAnimate"
          repeatCount="indefinite"
        />
      </circle>

      <circle
        cx="25"
        cy="25"
        r="12"
        fill="none"
        stroke-width="3"
        :stroke="insideColor"
        stroke-dasharray="19"
        stroke-linecap="round"
      >
        <!-- <animateTransform
          attributeName="transform"
          type="rotate"
          from="360 25 25"
          to="0 25 25"
          dur="2s"
          repeatCount="indefinite"
        /> -->
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="360 25 25;0 25 25"
          :dur="`${dur}s`"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke"
          :dur="`${+dur*2}s`"
          :values="insideColorAnimate"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { computed,defineComponent  } from "vue";
export default defineComponent({
  name: "KruupLoding",
  props: {
    width: {
      type: [Number, String],
      default: 50,
    },
    height: {
      type: [Number, String],
      default: 50,
    },
    outsideColor: {
      type: String,
      default: "#3be6cb",
    },
    insideColor: {
      type: String,
      default: "#02bcfe",
    },
    dur:{
      type:[Number,String],
      default:1.5
    }
  },
  setup(ctx) {
    const outsideColorAnimate = computed(()=>`${ctx.outsideColor};${ctx.insideColor};${ctx.outsideColor}`)
    const insideColorAnimate = computed(()=>`${ctx.insideColor};${ctx.outsideColor};${ctx.insideColor}`)
    return {
      outsideColorAnimate,
      insideColorAnimate
    }

  }
});
</script>

<style lang="scss" scoped>
.kruup-loding{
  display: flex;
    flex-direction: column;
    align-items: center;
}
</style>